<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/datail.css">
    <link rel="stylesheet" href="/libs/iconfont/iconfont.css">
    <link rel="shortcut icon" href="//img.alicdn.com/tfs/TB1XlF3RpXXXXc6XXXXXXXXXXXX-16-16.png">
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
    <script src="/libs/jquery-3.4.1.min.js"></script>
    <script src="/libs/jquery.elevateZoom-3.0.8.min.js"></script>
</head>
<body>
    <!-- header -->
    <header></header>
    <!-- banner -->
    <div class="banner"><div class="banner-con"></div></div>
    <!-- select -->
    <div class="select">
        <div class="select-con" id="giftList">
        </div>
        <script type="text/html" id="giftListTemplate">
            {{each list item}}
            <a href='/html/category.html?id={{item.id}}' target="_blank">
                <div class="imgBox">
                    <img src="{{item.imageUrl}}" alt="">
                </div>
                <p>{{item.name}}</p>
            </a>
            {{/each}}
        </script>
    </div>
    <!-- shop -->
    <div class="shop">
        <div class="shop-con" id="design"></div>
        <script type="text/html" id="designTemplate">
            <div class="shopLeft">
                <img src="{{photo[0].url}}" alt="" class="zoom-image">
                <div class="imgs">
                    <ul id="gal1" class="imgList">
                        {{each photo img}}
                        <li>
                            <a href="javascript:;" data-image="{{img.url}}" data-zoom-image="{{img.url}}">
                                <img src="{{img.url}}" class="smallpic">
                            </a>
                        </li>
                        {{/each}}
                    </ul>
                </div>
            </div>
            <div class="shopRight">
                <h3>{{title}}</h3>
                <div class="price"><div class="originPrice">价格&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <b>￥</b><span>{{originPrice}}</span></div><p>促销价</p><i>￥</i><em>{{price}}</em></div>
                <div class="priceList">
                    <p>颜色分类</p>
                    <a href="#"><img src="{{photo[0].url}}" alt=""></a>
                </div>
                <div class="changeNum">
                    <p>数量</p>
                    <input type="text" value="1" id="goodsNum">
                    <button class="addBtn" type="button" id="addBtn">+</button>
                    <button class="subBtn" type="button" id="subBtn" disabled>-</button>
                </div>
                <div class="buy">
                    <button class="buyBtn" type="button">立即购买</button>
                    <button class="cartBtn" type="button" id="add-to-cart-btn"><i class="iconfont icon-gouwuche2"></i>加入购物车</button>
                </div>
                <table class="juan" id="juan">
                    <tr>
                        <td>优惠券</td>
                        <td>卷值</td>
                        <td>有效期</td>
                        <td>操作</td>
                    </tr>
                    <tr>
                        <td>{{coupon.couponText}}</td>
                        <td>{{coupon.price}}</td>
                        <td>{{coupon.expireDate}}</td>
                        <td><a href="{{fetchTbItemUrl}}" target="_blank">领取</a></td>
                    </tr>
                </table>
            </div>
        </script>
    </div>
    <!-- desc -->
    <div class="desc-con">
        <div class="title">
            <p class="active">商品详情</p>
            <p>累计评价</p>
            <p>服务详情</p>
        </div>
        <div id="imgList"></div>
        <script type="text/html" id="imgListTemplate">
            {{each desc detailImg}}       
            <div class="imgBox"><img src="{{detailImg.image.url}}" alt=""></div>
            {{/each}}
        </script>
    </div>
    <!-- footer -->
    <footer></footer>
    <div id="cart" class="cart">
        <i class="iconfont icon-cart"></i>
        <span>0</span>
    </div>
</body>
<script src="/libs/require/require.min.js" data-main="/js/detail"></script>
</html>